<script setup>
import { customRef } from 'vue';
import Child from '@/views/test/components/child.vue';

let timer;
// 自定义ref
const msgRef = (value) =>
  customRef((track, trigger) => ({
    get: () => {
      track(); // 持续跟踪响应数据
      return value;
    },
    set: (newValue) => {
      timer && clearTimeout(timer);
      timer = setTimeout(() => {
        value = newValue;
        console.log(value, newValue);
        trigger(); // 每次变化触发值改变
      }, 1000);
      console.log(666);
    },
  }));
const msg = msgRef(0);
const changeMsg = () => {
  msg.value += 1;
};

changeMsg();

defineExpose({
  changeMsg,
});
</script>

<template>
  <div>demo</div>
  <child type="info" size="small" color="#333"></child>
  <h1>{{ msg }}</h1>
</template>

<style scoped lang="scss"></style>
